<template>
  <div>
    <!-- 第一种方式 -->
    <!-- <div>{{code.substring(0,code.indexOf('d'))+code[code.indexOf('d')].toUpperCase()+code.substr(code.indexOf('d')+1)}}</div> -->
    <!-- 第二种使用methods -->
    <!-- <p>{{toUpperCase()}}</p>
    <p>{{toUpperCase()}}</p>-->
    <!-- 第三种方式: 使用计算属性 -->
    <!-- <p>{{toUpperCaseComputed}}</p>
    <p>{{toUpperCaseComputed}}</p>-->

    <!-- <p>
      <input type="text" v-model="firstname" />
      <input type="text" v-model="lastname" />
      <input type="text" v-model="fullname" />
    </p>-->

    <!-- 计算属性是否可以监听深层对象 -->
    <!-- <p @click="user.like.sports='足球'">最喜欢的运动: {{userinfo.like.sports}}</p> -->

    <!-- 计算属性实现总价 -->
    <table>
      <thead>
        <tr>
          <th>
            全选
            <input type="checkbox" v-model="checkedAll" />
          </th>
          <th>商品id</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in goodlist" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.checked" />
          </td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="item.num++">+</button>
            {{item.num}}
            <button @click="item.num--">-</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>总价: {{totalPrice}}</div>
  </div>
</template>

<script>
// 计算属性:
// 由来: 有时候模板中的语法太过沉重, 这时候希望有一个计算属性, 计算属性可以解决该问题

export default {
  data() {
    return {
      code: "abcdefg",
      lastname: "",
      firstname: "",
      user: {
        like: {
          sports: "篮球"
        }
      },
      goodlist: [
        {
          id: 0,
          name: "苹果",
          checked: true,
          price: 100,
          num: 1
        },
        {
          id: 1,
          name: "梨",
          checked: false,
          price: 200,
          num: 2
        },
        {
          id: 2,
          name: "香蕉",
          checked: true,
          price: 300,
          num: 3
        }
      ]
    };
  },
  computed: {
    // toUpperCaseComputed() {
    //   console.log("计算属性");
    //   return (
    //     this.code.substring(0, this.code.indexOf("d")) +
    //     this.code[this.code.indexOf("d")].toUpperCase() +
    //     this.code.substr(this.code.indexOf("d") + 1)
    //   );
    // },
    // 计算属性的简写方式:
    // fullname() {
    //   return this.firstname + this.lastname;
    // }
    // 计算属性的常规写法
    fullname: {
      get() {
        return this.firstname + this.lastname;
      },
      set(newvalue) {
        this.firstname = newvalue.substr(0, 1);
        this.lastname = newvalue.substr(1);
      }
    },
    userinfo() {
      return this.user;
    },
    totalPrice() {
      let sum = 0;
      this.goodlist.forEach(item => {
        if (item.checked) {
          sum += item.num * item.price;
        }
      });

      return sum;
    },
    checkedAll: {
      get() {
        // 返回值为一个boolean 决定当前是否全选
        return this.goodlist.every(item => item.checked);
      },
      set(boolean) {
        this.goodlist.forEach(item => {
          item.checked = boolean;
        });
      }
    }
  },
  methods: {
    toUpperCase() {
      console.log("methods");
      return (
        this.code.substring(0, this.code.indexOf("d")) +
        this.code[this.code.indexOf("d")].toUpperCase() +
        this.code.substr(this.code.indexOf("d") + 1)
      );
    }
  }
};
</script>
<style scoped>
</style>